<template>
  <div>
     <div class="container" style="width:100%;">
    <!--工具栏-->
    <div class="toolbar" style="float:left; padding:18px;">
        <el-form :inline="true" :model="filters" size="small">
            <el-form-item>
                <el-input v-model="filters.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="findPage(null)">查询</el-button>
            </el-form-item>
            <el-form-item>
                <!-- <kt-button label="新增" perms="sys:user:add" type="primary" @click="handleAdd" /> -->
            </el-form-item>
        </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table permsEdit="sys:user:edit" permsDelete="sys:user:delete"
        :data="pageResult" :columns="columns" 
        @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
    </kt-table>
    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm">
            <el-form-item label="ID" prop="id">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="name">
                <el-input v-model="dataForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="机构" prop="deptName">
                <popup-tree-input 
                    :data="deptData" 
                    :props="deptTreeProps" 
                    :prop="dataForm.deptName" 
                    :nodeKey="''+dataForm.deptId" 
                    :currentChangeHandle="deptTreeCurrentChangeHandle">
                </popup-tree-input>
            </el-form-item> -->
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="dataForm.email" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="dataForm.mobile" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
// import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
// import KtButton from "@/views/Core/KtButton"
export default {
    components:{
            // PopupTreeInput,
            KtTable,
            // KtButton
    },
    data() {
        return {
            filters: {
                name: ''
            },
            columns: [
                {prop:"id", label:"ID", minWidth:40, sortable:"false"},
                {prop:"username", label:"用户名", minWidth:120, sortable:"true"},
                // {prop:"deptName", label:"机构", minWidth:120, sortable:"true"},
                {prop:"email", label:"邮箱", minWidth:120, sortable:"true"},
                {prop:"mobile", label:"手机", minWidth:120, sortable:"true"}
            ],
            pageRequest: { pageNum: 1, pageSize: 8 },
            pageResult: {},

            operation: false, // true:新增, false:编辑
            editDialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            dataFormRules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ]
            },
            // 新增编辑界面数据
            dataForm: {
                id: 0,
                name: '',
                password: '123456',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            },
            deptData: [],
            deptTreeProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    methods: {
        // 获取分页数据
        findPage: function (data) {
            if(data !== null) {
                this.pageRequest = data.pageRequest
            }
            this.pageRequest.columnFilters = {name: {name:'name', value:this.filters.name}}
            this.$api.user.findPage(this.pageRequest).then((res) => {
                console.log(res)
                this.pageResult = res.data
            })
        },
        // 批量删除
        handleDelete: function (data) {
            this.$api.user.batchDelete(data.params).then(data.callback)
        },
        // 显示新增界面
        handleAdd: function () {
            this.editDialogVisible = true
            this.operation = true
            this.dataForm = {
                id: 0,
                name: '',
                password: '',
                deptId: 1,
                deptName: '',
                email: 'test@qq.com',
                mobile: '13889700023',
                status: 1
            }
        },
        // 显示编辑界面
        handleEdit: function (params) {
            this.editDialogVisible = true
            this.operation = false
            this.dataForm = Object.assign({}, params.row)
        },
        // 编辑
        editSubmit: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.editLoading = true
                        let params = Object.assign({}, this.dataForm)
                        this.$api.user.save(params).then((res) => {
                            this.editLoading = false
                            this.$message({ message: '提交成功', type: 'success' })
                            this.$refs['dataForm'].resetFields()
                            this.editDialogVisible = false
                            this.findPage(null)
                        })
                    })
                }
            })
        },
        // 获取部门列表
        // findDeptTree: function () {
        //     this.$api.dept.findDeptTree().then((res) => {
        //         this.deptData = res.data
        //     })
        // },
        // 菜单树选中
          deptTreeCurrentChangeHandle (data, node) {
            this.dataForm.deptId = data.id
            this.dataForm.deptName = data.name
          }
    },
    mounted() {
        // this.findDeptTree()
    }
}
</script>